<template>
	<view class="container">
		<view class="content">
			<view class="selector-wrapper">
				<view class="selected" :class="{'open': showSelector}" @click="showSelector = !showSelector">选择币种<text class="green-F">{{selectorList[selectorIndex]}}</text></view>
				<view class="selector-box" v-show="showSelector">
					<view class="selector-item" v-for="(item,index) in selectorList" :key="index" @click="selectorIndex=index;showSelector=false">{{item}}</view>
				</view>
			</view>
			<view class="address-area">
				<view class="title-box"><text>提现地址</text><image src="../../../static/images/user-scan.png" mode="" @click="scan()"></image></view>
				<view class="input-box"><input type="text" placeholder="扫一扫/或长按粘贴地址" placeholder-class="placeholder1" maxlength="14" v-model="inputAdd" /></view>
				<!-- <view class=""><text>*</text>提现请务必确认地址信息无误，一经提出，不可撤销！</view> -->
			</view>
			<view class="amount-area">
				<view class="title-box"><text>提现金额（数量）</text></view>
				<view class="input-box">
					<input type="number" placeholder="可提现数量：500.36200" placeholder-class="placeholder2" maxlength="14" v-model="inputNum" />
					<view class="all" @click="allChoose">全部提现</view>
				</view>
				<view class="miners-fee">矿工费 0000.00000 BTC</view>
			</view>
			<button class="confrim-btn">确认</button>
		</view>
		<tabbar-diy :isIndex="4" :isInner="true"></tabbar-diy>
	</view>
</template>

<script>
	let _self;
	import tabbarDiy from '../../../components/tabbar-diy.vue'
	export default {
		data() {
			return {
				isIndex: 4,
				showSelector: false,
				selectorList: ['ETH','USDT','BTC'],
				selectorIndex: 0,
				balance: '500.3796200',
				inputAdd: '',
				inputNum: '',
				sliderVal: 500000,
				
			}
		},
		computed:{
			floatPosition(){
				return this.sliderVal / 1000000 * 100;
			}
		},
		components:{
			tabbarDiy
		},
		onShow(){
		},
		onLoad() {
			_self = this;
		},
		methods: {
			sliderChange(event){
				this.sliderVal = event.detail.value;//上面的 v-model 绑定无效
			},
			scan(){
				uni.scanCode({
					success(res) {
						console.log(res);
						this.inputAdd = res.result;
					}
				})
			},
			allChoose(){
				this.inputNum = this.balance;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		color: #FFFFFF;
		padding-top: 20rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}
	
	.selector-wrapper{
		width: 686rpx;
		height: 84rpx;
		margin: 0 auto 32rpx;
		border-radius: 6rpx;
		background-color: #202A33;
		
		.selected{
			padding: 0 40rpx;
			font-size: 25rpx;
			line-height: 84rpx;
			position: relative;
			text-align: left;
			
			.green-F{
				margin-left: 15rpx;
			}
		}
		.selected::after{
			content: '';
			display: inline-block;
			width: 0rpx;
			height: 0rpx;
			border-top: 9rpx solid rgba($color: #ffffff, $alpha: 1);
			border-left: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-right: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-bottom: 9rpx solid rgba($color: #000000, $alpha: 0);
			position: absolute;
			top: 38rpx;
			right: 40rpx;
		}
		.selected.open::after{
			content: '';
			display: inline-block;
			width: 0rpx;
			height: 0rpx;
			border-right: 9rpx solid rgba($color: #ffffff, $alpha: 1);
			border-top: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-left: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-bottom: 9rpx solid rgba($color: #000000, $alpha: 0);
			position: absolute;
			top: 34rpx;
			right: 44rpx;
		}
		.selector-box{
			padding: 10rpx 60rpx;
			position: relative;
			left: 0rpx;
			top: 0rpx;
			background-color: #071724;
			z-index: 3;
		}
		
		.selector-item{
			font-size: 25rpx;
			line-height: 60rpx;
		}
	}
	
	.address-area{
		width: 698rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin: 0 auto;
		padding: 28rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;
		background-color: #151F2A;
		box-shadow: 0 2px 5px rgba($color: #00021B, $alpha: 0.3);
		
	}
	.title-box{
		height: 40rpx;
		font-size: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		image{
			width: 29rpx;
			height: 29rpx;
		}
	}
	.input-box{
		margin-top: 16rpx;
		border-bottom: 1px solid #3C547F;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		input{
			height: 58rpx;
			line-height: 58rpx;
			color: #fff;
			font-size: 24rpx;
		}
		.placeholder1{
			color: #666666;
			transform: scale(0.875);
			transform-origin: 0% 50%;
		}
		.placeholder2{
			color: #666666;
			transform: scale(0.72);
			transform-origin: 0% 50%;
		}
		.all{
			color: #7592B4;
			font-size: 24rpx;
			transform: scale(0.72);
			transform-origin: 100% 50%;
		}
	}

	.amount-area{
		width: 686rpx;
		height: 217rpx;
		border-radius: 8rpx;
		margin: 32rpx auto 126rpx;
		background-color: #151F2A;
		padding: 28rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 5px rgba($color: #00021B, $alpha: 0.3);
		
		.miners-fee{
			color: #7592B4;
			font-size: 24rpx;
			transform: scale(0.72);
			transform-origin: 0% 50%;
			margin-top: 10rpx;
		}
	}
	.confrim-btn{
		width: 450rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		margin: 0 auto;
		color: #FFFFFF;
		background-color: #0DD4BB;
		font-size: 24rpx;
	}
	
	
</style>
